<template>
  <view
    class="tab-bar"
    :style="[
      { backgroundColor: bgColor },
      borderStyle ? { borderTop: `1px solid ${borderColor}` } : {},
    ]"
  >
    <!-- 菜单项 -->
    <view
      v-for="(item, index) in tabList"
      :key="index"
      class="tab-item"
      :class="{ active: currentIndex === index }"
      @click="handleTabClick(item, index)"
      :style="{
        opacity: item.disabled ? 0.5 : 1,
        pointerEvents: item.disabled ? 'none' : 'auto',
      }"
    >
      <!-- 图标 -->
      <view class="tab-icon">
        <image
          :src="currentIndex === index ? item.selectedIcon : item.icon"
          :style="{ width: iconSize, height: iconSize }"
          mode="widthFix"
        ></image>
      </view>

      <!-- 文字 -->
      <text
        class="tab-text"
        :style="[
          currentIndex === index
            ? { color: activeColor, fontSize: activeFontSize }
            : { color: inactiveColor, fontSize: inactiveFontSize },
        ]"
      >
        {{ item.text }}
      </text>

      <!-- 徽章（可选） -->
      <view
        v-if="item.badge"
        class="tab-badge"
        :style="{ backgroundColor: badgeColor, fontSize: badgeSize }"
      >
        {{ item.badge }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, onBeforeMount, ref } from 'vue';
import { useCounterStore } from '@/store';

const store = useCounterStore();
const styleConfigData = ref({
  bgColor: '#ffffff', // 背景色
  borderColor: '#eee', // 边框颜色
  showBorder: true, // 是否显示边框
  activeColor: '#3253BA', // 选中颜色
  inactiveColor: '#666666', // 未选中颜色
  iconSize: '24px', // 图标尺寸
  activeFontSize: '12px', // 选中文字大小
  inactiveFontSize: '12px', // 未选中文字大小
  badgeColor: '#ff3b30', // 徽章背景色
  badgeSize: '10px', // 徽章文字大小
});
// 定义 props
const props = defineProps({
  // 当前选中索引（必填）
  currentIndex: {
    type: Number,
    required: true,
    default: 0,
  },
  // 菜单配置列表（必填）
  tabList: {
    type: Array,
    required: true,
    default: () => [],
    /* 每项格式：
      {
        text: String,       // 文字
        icon: String,       // 默认图标路径
        selectedIcon: String, // 选中图标路径
        path: String,       // 跳转路由（navigateTo 路由）
        badge: Number|String, // 徽章数字（可选）
        disabled: Boolean   // 是否禁用（可选）
      }
      */
  },
  // 样式配置（可选）
  styleConfig: {
    type: Object,
    default: () => ({}),
  },
});

// 定义 emits
const emit = defineEmits(['tabChange']);

// 解构样式配置（简化模板调用）
const bgColor = computed(() => styleConfigData.value.bgColor);
const borderColor = computed(() => styleConfigData.value.borderColor);
const borderStyle = computed(() => styleConfigData.value.showBorder);
const activeColor = computed(() => styleConfigData.value.activeColor);
const inactiveColor = computed(() => styleConfigData.value.inactiveColor);
const iconSize = computed(() => styleConfigData.value.iconSize);
const activeFontSize = computed(() => styleConfigData.value.activeFontSize);
const inactiveFontSize = computed(() => styleConfigData.value.inactiveFontSize);
const badgeColor = computed(() => styleConfigData.value.badgeColor);
const badgeSize = computed(() => styleConfigData.value.badgeSize);

// 点击菜单项
const handleTabClick = (item, index) => {
  // 禁止重复点击当前项
  if (props.currentIndex === index) return;

  // 触发父组件事件（返回索引和配置）
  emit('tabChange', { index, item });

  // 跳转路由（仅当配置了 path 且未禁用）
  if (item.path && !item.disabled) {
    uni.redirectTo({ url: item.path });
  }
};

onBeforeMount(() => {
  styleConfigData.value = { ...styleConfigData.value, ...props.styleConfig };
});
</script>

<style scoped lang="scss">
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx; /* 基础高度，可通过样式覆盖 */
  z-index: 98;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
  height: 100%;
}

.tab-icon {
  image {
    width: 40rpx;
    height: 40rpx;
  }
  margin-bottom: 2px;
}

.tab-text {
  line-height: 1;
}

.tab-badge {
  position: absolute;
  top: 5px;
  right: 30%;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  color: white;
  border-radius: 50%;
  padding: 0 4px;
  transform: translateX(50%);
}
</style>
